<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">
        {{title}}
      </el-col>
      <el-col :span="12" class="myLineHeight_40px myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="onPreview">预览</el-button>
        <el-button type="primary" class="myBgGreen" @click="onCreate" v-if="type=='add'">保存</el-button>
        <el-button type="primary" class="myBgGreen" @click="onEdit" v-if="type=='update' && isShow(147)">保存</el-button>
        <el-button type="primary" class="myBgGreen" @click="onBack">返回</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-container>
        <el-aside class="myPaddingRight_10px">
          <el-row class="myTitleBorderBottom myMarginBottom_10px">
            <el-col :span="12" class="myLineHeight_40px">
              页面模板
            </el-col>
          </el-row>
          <el-row class="myModeImg myModeContainer">
            <img src="static/images/model-1-1.png" class="on" title="首页" data-index="1-1">
            <img src="static/images/model-1-2.png" title="第二页" data-index="1-2">
            <img src="static/images/model-1-3.png" title="第三页" data-index="1-3">
            <img src="static/images/model-1-4.png" title="第四页" data-index="1-4">
            <img src="static/images/model-1-5.png" title="第五页" data-index="1-5">
            <img src="static/images/model-1-6.png" title="第六页" data-index="1-6">
            <img src="static/images/model-1-7.png" title="第七页" data-index="1-7">
            <img src="static/images/model-1-8.png" title="第八页" data-index="1-8">
          </el-row>
        </el-aside>
        <el-main class="myMainContainer">
          <el-row class="myTitleBorderBottom">
            <el-col :span="12" class="myLineHeight_40px my">
              <el-input placeholder="请输入简报标题" v-model="briefingTitle" :readonly="isInfo" autofocus></el-input>
            </el-col>
            <el-col :span="12" class="myLineHeight_40px myTextAlignRight">
              <template>
                <el-radio-group v-model="briefingStatus">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">停用</el-radio>
                </el-radio-group>
              </template>
            </el-col>
          </el-row>
          <div class="myOperationBox">
            <div class="myOperation">
              <div class="mode_1-1" v-if="mode=='1-1'">
                <img src="static/images/model1-1-3.png" style="width: 340px; position: absolute; top: 10px; left: 50%; margin-left: -170px;">
                <el-input v-model="model_1_1_time" class="myModelTime_1_1" :maxlength="maxlength_4"></el-input>
                <el-input v-model="model_1_1_type" class="myModelType_1_1" :maxlength="maxlength_4"></el-input>
                <el-input v-model="model_1_1_address" class="myModelAddress_1_1" :maxlength="maxlength_4"></el-input>
                <el-input v-model="model_1_1_date" class="myModelDate_1_1"></el-input>
                <img src="static/images/model1-1-7.png" style="width: 100%; position: absolute; bottom: 0; left: 0;">
              </div>
              <div class="mode_1-2" v-if="mode=='1-2'">
                <img src="static/images/model1-2-1.png" style="width: 78px; position: absolute; top: 10px; left: 50%; margin-left: -39px;">
                <img src="static/images/model1-2-2.png" style="width: 80%; position: absolute; top: 70px; left: 40px;">
                <el-input v-model="model_1_2_item_1" class="myModelItem_1_1" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_2_item_2" class="myModelItem_1_2" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_2_item_3" class="myModelItem_1_3" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_2_item_4" class="myModelItem_1_4" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_2_item_5" class="myModelItem_1_5" :maxlength="maxlength_15"></el-input>
              </div>
              <div class="mode_1-3" v-if="mode=='1-3'">
                <el-upload
                  class="model1-3-1"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess">
                  <img v-if="modelImgUrl1_3_1" :src="modelImgUrl1_3_1" class="modelImg1-3-1">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <img src="static/images/model1-3-1.png" style="width: 80%; position: absolute; top: 330px; left: 40px;">
                <el-input v-model="model_1_3_item_1" class="myModelItem_1_3_1" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_3_item_2" class="myModelItem_1_3_2" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_3_item_3" class="myModelItem_1_3_3" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_3_item_4" class="myModelItem_1_3_4" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_3_item_5" class="myModelItem_1_3_5" :maxlength="maxlength_15"></el-input>
              </div>            
              <div class="mode_1-4" v-if="mode=='1-4'">
                <el-upload
                  class="model1-3-1"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_4_1">
                  <img v-if="modelImgUrl1_4_1" :src="modelImgUrl1_4_1" class="modelImg1-3-1">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <img src="static/images/model1-4-1.png" style="width: 80%; position: absolute; top: 400px; left: 40px;">
                <el-input v-model="model_1_4_item_1" class="myModelItem_1_4_1" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_4_item_2" class="myModelItem_1_4_2" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_4_item_3" class="myModelItem_1_4_3" :maxlength="maxlength_15"></el-input>
                <el-upload
                  class="model1-4-2"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_4_2">
                  <img v-if="modelImgUrl1_4_2" :src="modelImgUrl1_4_2" class="modelImg1-4-2">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-4-2"></i>
                </el-upload>
                <el-upload
                  class="model1-4-3"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_4_3">
                  <img v-if="modelImgUrl1_4_3" :src="modelImgUrl1_4_3" class="modelImg1-4-3">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-4-3"></i>
                </el-upload>
              </div>
              <div class="mode_1-5" v-if="mode=='1-5'">
                <el-upload
                  class="model1-5-1"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_5_1">
                  <img v-if="modelImgUrl1_5_1" :src="modelImgUrl1_5_1" class="modelImg1-5-1">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-5-1"></i>
                </el-upload>
                <el-input v-model="model_1_5_item_1" class="myModelItem_1_5_1" :maxlength="maxlength_15"></el-input>
                <el-input type="textarea" v-model="model_1_5_item_2" class="myModelItem_1_5_2" noresize></el-input>
                <el-input v-model="model_1_5_item_3" class="myModelItem_1_5_3" :maxlength="maxlength_15"></el-input>
                <el-input type="textarea" v-model="model_1_5_item_4" class="myModelItem_1_5_4" noresize></el-input>
                <el-upload
                  class="model1-5-2"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_5_2">
                  <img v-if="modelImgUrl1_5_2" :src="modelImgUrl1_5_2" class="modelImg1-5-2">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-5-2"></i>
                </el-upload>
              </div>
              <div class="mode_1-6" v-if="mode=='1-6'">
                <el-upload
                  class="model1-6-1"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_6_1">
                  <img v-if="modelImgUrl1_6_1" :src="modelImgUrl1_6_1" class="modelImg1-6-1">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-6-1"></i>
                </el-upload>
                <el-upload
                  class="model1-6-2"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_6_2">
                  <img v-if="modelImgUrl1_6_2" :src="modelImgUrl1_6_2" class="modelImg1-6-2">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-6-2"></i>
                </el-upload>
                <el-upload
                  class="model1-6-3"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_6_3">
                  <img v-if="modelImgUrl1_6_3" :src="modelImgUrl1_6_3" class="modelImg1-6-3">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-6-3"></i>
                </el-upload>
                <img src="static/images/model1-6-1.png" style="width: 80%; height: 280px; position: absolute; top: 380px; left: 40px;">
                <el-input v-model="model_1_6_item_1" class="myModelItem_1_6_1" :maxlength="maxlength_15"></el-input>
                <el-input type="textarea" v-model="model_1_6_item_2" class="myModelItem_1_6_2" noresize></el-input>
              </div>
              <div class="mode_1-7" v-if="mode=='1-7'">
                <el-upload
                  class="model1-7-1"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_7_1">
                  <img v-if="modelImgUrl1_7_1" :src="modelImgUrl1_7_1" class="modelImg1-7-1">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-7-1"></i>
                </el-upload>
                <el-upload
                  class="model1-7-2"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_7_2">
                  <img v-if="modelImgUrl1_7_2" :src="modelImgUrl1_7_2" class="modelImg1-7-2">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-7-2"></i>
                </el-upload>
                <el-upload
                  class="model1-7-3"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess1_7_3">
                  <img v-if="modelImgUrl1_7_3" :src="modelImgUrl1_7_3" class="modelImg1-7-3">
                  <i v-else class="el-icon-plus avatar-uploader-icon1-7-3"></i>
                </el-upload>
                <el-input v-model="model_1_7_item_1" class="myModelItem_1_7_1" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_7_item_2" class="myModelItem_1_7_2" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_7_item_3" class="myModelItem_1_7_3" :maxlength="maxlength_15"></el-input>
              </div>
              <div class="mode_1-8" v-if="mode=='1-8'">
                <img src="static/images/model1-8-1.png" style="width: 260px; position: absolute; top: 30px; left: 50%; margin-left: -130px;">
                <img src="static/images/model1-1-7.png" style="width: 100%; position: absolute; bottom: 0; left: 0;">
                <el-input v-model="model_1_8_item_1" class="myModelItem_1_8_1" :maxlength="maxlength_15"></el-input>
                <el-input v-model="model_1_8_item_2" class="myModelItem_1_8_2"></el-input>
              </div>
            </div>
            <el-button type="primary" class="myBgGreen mySaveBtn" v-if="!isInfo && isShow(148)" @click="onSave">保存到第{{page}}页</el-button>
          </div>
        </el-main>
        <el-aside width="210px" class="myPaddingLeft_10px">
          <el-row class="myTitleBorderBottom myMarginBottom_10px">
            <el-col :span="12" class="myLineHeight_40px">
              页面
            </el-col>
            <el-col :span="12" class="myLineHeight_40px myTextAlignRight">
              <i class="el-icon-delete myOnDelete" title="删除" v-if="!isInfo"></i>
              <i class="el-icon-document myOnClone" title="复制" v-if="!isInfo"></i>
            </el-col>
          </el-row>
          <el-row class="myPageContainer">
            <ul class="myPageUl">
              <li class="on">第1页</li>
            </ul>
            <p class="myAddPage el-icon-plus" title="新增" v-if="!isInfo"></p>
          </el-row>
        </el-aside>
      </el-container>
    </el-row>
    <el-dialog title="预览" class="myIframe" :visible.sync="onPreviewDialog" @open="onOpen">
      <iframe id="myIframe" style="width: 414px; height: 700px; border:1px solid #f5f5f5; background: none;"></iframe>
    </el-dialog>
  </div>
</template>
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myMarginBottom_10px{
    margin-bottom: 20px;
  }
  .myModeContainer{
  	width: 300px;
  	height: 675px;
  	overflow-y:scroll; 
  }
  .myModeContainer::-webkit-scrollbar,.myPageContainer::-webkit-scrollbar{
  	width: 2px;
  	height: 2px;
  }
  .myModeImg img{
  	width: 32%;
  	box-sizing: border-box;
  	border:1px solid #ededed;
  	float: left;
  	margin-bottom: 2px;
  	margin-right: 2px;
    cursor: pointer;
    padding:1px;
  }
  .myMainContainer{
  	padding:0 20px;
    position: relative;
    overflow: hidden;
  }
  .myPageContainer{
  	width:200px;
  	height: 675px;
  	overflow-y:scroll;
  	box-sizing: border-box; 
  }
  .myPageUl{
  	width: 100%;
  }
  .myPageUl li{
  	width: 100%;
  	height: 80px;
  	box-sizing: border-box;
  	border:1px solid #ededed;
  	text-align: center;
  	line-height: 80px;
  	background:#F5F7F2;
  	margin-bottom: 10px;
  	position: relative;
  	overflow: hidden;
  	cursor: pointer;
  }
  .myPageUl li.on,.myModeImg img.on{
  	border-color: #33ceba;
  }
  .myAddPage{
  	width: 100%;
	  height: 80px;
  	box-sizing: border-box;
  	border:1px solid #ededed;
  	text-align: center;
  	line-height: 80px;
  	font-size: 20px;
  	cursor: pointer;
  }
  .myOnDelete,.myOnClone{
    cursor: pointer;
  }
  .myOperationBox{
    width: 100%;
    background: #F5F7F2;
    position: relative;
    height: 723px;
  }
  .myOperation{
    width: 414px;
    height: 700px;
    background: url(/static/images/bg.png) no-repeat left top;
    border:1px solid #ededed;
    position: absolute;
    left: 50%;
    margin-left: -208px;
    top: 50%;
    margin-top: -350px;
    background-size: 100% 100%;
  }
  .myPaddingRight_10px{
    padding-right: 10px;
  }
  .myPaddingLeft_10px{
    width: 210px;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .model1-3-1{
    position: absolute;
    left: 50%;
    margin-left: -165px;
    top: 30px;
  }
  .model1-3-1 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-3-1 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 330px;
    height: 210px;
    line-height: 210px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-3-1 {
    width: 330px;
    height: 210px;
    display: block;
  }

  .model1-4-2{
    position: absolute;
    left: 40px;
    top: 500px;
  }
  .model1-4-2 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-4-2 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-4-2 {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-4-2 {
    width: 150px;
    height: 120px;
    display: block;
  }

  .model1-4-3{
    position: absolute;
    left: 220px;
    top: 500px;
  }
  .model1-4-3 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-4-3 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-4-3{
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-4-3 {
    width: 150px;
    height: 120px;
    display: block;
  }

  .model1-5-1{
    position: absolute;
    left: 40px;
    top: 30px;
  }
  .model1-5-1 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-5-1 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-5-1{
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-5-1 {
    width: 150px;
    height: 300px;
    display: block;
  }

  .model1-5-2{
    position: absolute;
    left: 225px;
    top: 380px;
  }
  .model1-5-2 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-5-2 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-5-2{
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-5-2 {
    width: 150px;
    height: 300px;
    display: block;
  }

  .model1-6-1{
    position: absolute;
    left: 40px;
    top: 30px;
  }
  .model1-6-1 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-6-1 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-6-1{
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 320px;
    line-height: 320px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-6-1 {
    width: 150px;
    height: 320px;
    display: block;
  }

  .model1-6-2{
    position: absolute;
    left: 220px;
    top: 30px;
  }
  .model1-6-2 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-6-2 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-6-2{
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-6-2 {
    width: 150px;
    height: 150px;
    display: block;
  }

  .model1-6-3{
    position: absolute;
    left: 220px;
    top: 200px;
  }
  .model1-6-3 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-6-3 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-6-3{
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-6-3 {
    width: 150px;
    height: 150px;
    display: block;
  }
  
  .model1-7-1{
    position: absolute;
    left: 27px;
    top: 20px;
  }
  .model1-7-1 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-7-1 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-7-1{
    font-size: 28px;
    color: #8c939d;
    width: 360px;
    height: 180px;
    line-height: 180px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-7-1 {
    width: 360px;
    height: 180px;
    display: block;
  }
  
  .model1-7-2{
    position: absolute;
    left: 27px;
    top: 240px;
  }
  .model1-7-2 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-7-2 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-7-2{
    font-size: 28px;
    color: #8c939d;
    width: 360px;
    height: 180px;
    line-height: 180px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-7-2 {
    width: 360px;
    height: 180px;
    display: block;
  }

  .model1-7-3{
    position: absolute;
    left: 27px;
    top: 460px;
  }
  .model1-7-3 .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .model1-7-3 .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon1-7-3{
    font-size: 28px;
    color: #8c939d;
    width: 360px;
    height: 180px;
    line-height: 180px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .modelImg1-7-3 {
    width: 360px;
    height: 180px;
    display: block;
  }

  .myModelTime_1_1{
    position: absolute; 
    top:130px; 
    width: 200px; 
    left: 50%; 
    margin-left: -100px;
  }
  .myModelType_1_1{
    position: absolute; 
    top:190px; 
    width: 200px; 
    left: 50%; 
    margin-left: -100px;
  }
  .myModelAddress_1_1{
    position: absolute; 
    top:450px; 
    width: 200px; 
    left: 50%; 
    margin-left: -100px;
  }
  .myModelDate_1_1{
    position: absolute; 
    top:510px; 
    width: 200px; 
    left: 50%; 
    margin-left: -100px;
  }
  .myModelItem_1_1{
    position: absolute; 
    top:110px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_2{
    position: absolute; 
    top:170px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_3{
    position: absolute; 
    top:230px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_4{
    position: absolute; 
    top:290px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_5{
    position: absolute; 
    top:350px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_3_1{
    position: absolute; 
    top:340px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_3_2{
    position: absolute; 
    top:390px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_3_3{
    position: absolute; 
    top:440px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_3_4{
    position: absolute; 
    top:490px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_3_5{
    position: absolute; 
    top:540px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_4_1{
    position: absolute; 
    top:270px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_4_2{
    position: absolute; 
    top:330px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_4_3{
    position: absolute; 
    top:420px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_5_1{
    position: absolute; 
    top:30px; 
    width: 190px; 
    left: 205px; 
  }
  .myModelItem_1_5_2{
    position: absolute; 
    top:90px; 
    left:205px;
    width: 190px;
  }
  .myModelItem_1_5_3{
    position: absolute; 
    top:380px; 
    width: 190px; 
    left: 20px; 
  }
  .myModelItem_1_5_4{
    position: absolute; 
    top:440px; 
    width: 190px; 
    left: 20px; 
  }
  .myModelItem_1_6_1{
    position: absolute; 
    top:400px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_6_2{
    position: absolute; 
    top:450px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_7_1{
    position: absolute;
    width: 360px;
    left: 27px;
    top:160px;
  }
  .myModelItem_1_7_2{
    position: absolute;
    width: 360px;
    left: 27px;
    top:380px;
  }
  .myModelItem_1_7_3{
    position: absolute;
    width: 360px;
    left: 27px;
    top:600px;
  }
  .myModelItem_1_8_1{
    position: absolute; 
    top:160px; 
    width: 300px; 
    left: 50%; 
    margin-left: -150px;
  }
  .myModelItem_1_8_2{
    position: absolute; 
    width: 300px;
    bottom:60px; 
    left: 50%; 
    margin-left: -150px;
  }
  .mySaveBtn{
    position: absolute; 
    left: 50%; 
    margin-left: 212px; 
    top: 12px;
  }
</style>
<script>
  import { getQNToken , addBriefing , getBriefingDetail , editBriefing } from '@/api/contentMGT';
  import { QINIU_API , QINIU_UP_API , STATIC_B_URL } from '@/config/baseUrl';
  export default {
    data(){
      return{
        title: "简报管理",
        id: "",
        type:"",
        isInfo:false,
        isDisabled:false,
        briefingStatus:1,
        is_modifly:false,
        briefingTitle:"",
        onPreviewDialog:false,
        briefingConfig:{
          "title": this.briefingTitle,
          "status": this.briefingStatus,
          "config": []
        },
        mode:"1-1",
        page:1,//当前选中的页
        savePage:1,//保存时选中的页
        saveAllPage:1,//保存时的总页数
        executingState:"add",//执行状态【add新增/replace替换】
        htmlData:"",//预览时读取的配置数据
        uploadUrl:QINIU_UP_API,
        postData:{
          token:""
        },
        iframeData:"",
        maxlength_4:4,
        maxlength_15:15,

        model_1_1_time:"2018",
        model_1_1_type:"年度简报",
        model_1_1_address:"欧鹏K城",
        model_1_1_date:"2018.01.01",

        model_1_2_item_1:"1. 安全管理/有备无患",
        model_1_2_item_2:"2. 安全管理/有备无患",
        model_1_2_item_3:"3. 安全管理/有备无患",
        model_1_2_item_4:"4. 安全管理/有备无患",
        model_1_2_item_5:"5. 安全管理/有备无患",

        modelImgUrl1_3_1:"",
        model_1_3_item_1:"安全管理",
        model_1_3_item_2:"· 安全服务部体能训练",
        model_1_3_item_3:"· 时刻待命",
        model_1_3_item_4:"· 向坚守工作岗位的工作人员致敬",
        model_1_3_item_5:"· 安全管理",

        modelImgUrl1_4_1:"",
        model_1_4_item_1:"地面/车库清洁",
        model_1_4_item_2:"小区环境维护",
        model_1_4_item_3:"干净整洁的小区需要大家来维护",
        modelImgUrl1_4_2:"",
        modelImgUrl1_4_3:"",

        modelImgUrl1_5_1:"",
        model_1_5_item_1:"发棒棒糖",
        model_1_5_item_2:"圣诞节各岗位向小朋友发棒棒糖，让小朋友度过一个愉快的圣诞节",
        model_1_5_item_3:"挂迎新灯笼",
        model_1_5_item_4:"马上就要过年了，物业管理人员在挂灯笼",
        modelImgUrl1_5_2:"",

        modelImgUrl1_6_1:"",
        modelImgUrl1_6_2:"",
        modelImgUrl1_6_3:"",
        model_1_6_item_1:"设备房管理",
        model_1_6_item_2:"定期维保检查设备房设备，让其小区生活更加和谐时我们的职责所在。",

        modelImgUrl1_7_1:"",
        modelImgUrl1_7_2:"",
        modelImgUrl1_7_3:"",
        model_1_7_item_1:"车库漏水整改",
        model_1_7_item_2:"节前设备房检查",
        model_1_7_item_3:"楼栋消防栓检查",

        model_1_8_item_1:"欧鹏K城",
        model_1_8_item_2:"新欧鹏物管家 知心管家 让您放心在家",
      }
    },
    components: {
        
    },
    created(){
      document.title=this.title;
      this.id = this.$route.query.id;
      this.type = this.$route.query.type;
      this.onGetQNToken(); 
      if(this.type=='add'){

      }
      if(this.type=='update'){
        this.onGetBriefingDetail();
        this.isInfo=false;
      }
      if(this.type=='info'){
        this.onGetBriefingDetail();
        this.isInfo=true;
      }
    }, 
    mounted(){
      let vm=this;

    	$(".myPageUl li").click(function(){//页数点击选中效果
    		$(this).addClass("on").siblings().removeClass("on");
        vm.page=$(this).index()+1;//当前选中的页数


        if(vm.briefingConfig.config.length>vm.page-1){
          // console.log(vm.page,vm.briefingConfig.config[$(this).index()].model);
          vm.mode=vm.briefingConfig.config[$(this).index()].model;
          switch(vm.mode){
            case "1-1":
              vm.model_1_1_time=vm.briefingConfig.config[$(this).index()].item[0].value;
              vm.model_1_1_type=vm.briefingConfig.config[$(this).index()].item[1].value;
              vm.model_1_1_address=vm.briefingConfig.config[$(this).index()].item[2].value;
              vm.model_1_1_date=vm.briefingConfig.config[$(this).index()].item[3].value;
            break;
            case "1-2":
              vm.model_1_2_item_1=vm.briefingConfig.config[$(this).index()].item[0].value;
              vm.model_1_2_item_2=vm.briefingConfig.config[$(this).index()].item[1].value;
              vm.model_1_2_item_3=vm.briefingConfig.config[$(this).index()].item[2].value;
              vm.model_1_2_item_4=vm.briefingConfig.config[$(this).index()].item[3].value;
              vm.model_1_2_item_5=vm.briefingConfig.config[$(this).index()].item[4].value;
            break;
            case "1-3":
              vm.modelImgUrl1_3_1=vm.briefingConfig.config[$(this).index()].item[0].value;
              vm.model_1_3_item_1=vm.briefingConfig.config[$(this).index()].item[1].value;
              vm.model_1_3_item_2=vm.briefingConfig.config[$(this).index()].item[2].value;
              vm.model_1_3_item_3=vm.briefingConfig.config[$(this).index()].item[3].value;
              vm.model_1_3_item_4=vm.briefingConfig.config[$(this).index()].item[4].value;
              vm.model_1_3_item_5=vm.briefingConfig.config[$(this).index()].item[5].value;
            break;
            case "1-4":
              vm.modelImgUrl1_4_1=vm.briefingConfig.config[$(this).index()].item[0].value;
              vm.model_1_4_item_1=vm.briefingConfig.config[$(this).index()].item[1].value;
              vm.model_1_4_item_2=vm.briefingConfig.config[$(this).index()].item[2].value;
              vm.model_1_4_item_3=vm.briefingConfig.config[$(this).index()].item[3].value;
              vm.modelImgUrl1_4_2=vm.briefingConfig.config[$(this).index()].item[4].value;
              vm.modelImgUrl1_4_3=vm.briefingConfig.config[$(this).index()].item[5].value;
            break;
            case "1-5":
              vm.modelImgUrl1_5_1=vm.briefingConfig.config[$(this).index()].item[0].value;
              vm.model_1_5_item_1=vm.briefingConfig.config[$(this).index()].item[1].value;
              vm.model_1_5_item_2=vm.briefingConfig.config[$(this).index()].item[2].value;
              vm.model_1_5_item_3=vm.briefingConfig.config[$(this).index()].item[3].value;
              vm.model_1_5_item_4=vm.briefingConfig.config[$(this).index()].item[4].value;
              vm.modelImgUrl1_5_2=vm.briefingConfig.config[$(this).index()].item[5].value;
            break;
            case "1-6":
              vm.modelImgUrl1_6_1=vm.briefingConfig.config[$(this).index()].item[0].value;
              vm.modelImgUrl1_6_2=vm.briefingConfig.config[$(this).index()].item[1].value;
              vm.modelImgUrl1_6_3=vm.briefingConfig.config[$(this).index()].item[2].value;
              vm.model_1_6_item_1=vm.briefingConfig.config[$(this).index()].item[3].value;
              vm.model_1_6_item_2=vm.briefingConfig.config[$(this).index()].item[4].value;
            break;
            case "1-7":
              vm.modelImgUrl1_7_1=vm.briefingConfig.config[$(this).index()].item[0].value;
              vm.modelImgUrl1_7_2=vm.briefingConfig.config[$(this).index()].item[1].value;
              vm.modelImgUrl1_7_3=vm.briefingConfig.config[$(this).index()].item[2].value;
              vm.model_1_7_item_1=vm.briefingConfig.config[$(this).index()].item[3].value;
              vm.model_1_7_item_2=vm.briefingConfig.config[$(this).index()].item[4].value;
              vm.model_1_7_item_3=vm.briefingConfig.config[$(this).index()].item[5].value;
            break;
            case "1-8":
              vm.model_1_8_item_1=vm.briefingConfig.config[$(this).index()].item[0].value;
              vm.model_1_8_item_2=vm.briefingConfig.config[$(this).index()].item[1].value;
            break;
          }
        }else{
          vm.mode="";
        }

    	});
      $(".myModeImg img").click(function(){//模板点击选中效果
        if(vm.isInfo){
          vm.$message.info("现操作下模板功能暂不可用！");
          return;
        } 
        vm.$confirm('页面模板会覆盖编辑区域已有内容，是否继续？', '提示', {//删除确认框
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $(this).addClass("on").siblings().removeClass("on");
          vm.$message.success('执行成功!');

          // console.log("选中的模板",$(this).attr("data-index"));
          vm.mode=$(this).attr("data-index");//选中的模板

          vm.model_1_1_time="2018";
          vm.model_1_1_type="年度简报";
          vm.model_1_1_address="欧鹏K城";
          vm.model_1_1_date="2018.01.01";

          vm.model_1_2_item_1="1. 安全管理/有备无患";
          vm.model_1_2_item_2="2. 安全管理/有备无患";
          vm.model_1_2_item_3="3. 安全管理/有备无患";
          vm.model_1_2_item_4="4. 安全管理/有备无患";
          vm.model_1_2_item_5="5. 安全管理/有备无患";

          vm.modelImgUrl1_3_1="";
          vm.model_1_3_item_1="安全管理";
          vm.model_1_3_item_2="· 安全服务部体能训练";
          vm.model_1_3_item_3="· 时刻待命";
          vm.model_1_3_item_4="· 向坚守工作岗位的工作人员致敬";
          vm.model_1_3_item_5="· 安全管理";

          vm.modelImgUrl1_4_1="";
          vm.model_1_4_item_1="地面/车库清洁";
          vm.model_1_4_item_2="小区环境维护";
          vm.model_1_4_item_3="干净整洁的小区需要大家来维护";
          vm.modelImgUrl1_4_2="";
          vm.modelImgUrl1_4_3="";

          vm.modelImgUrl1_5_1="";
          vm.model_1_5_item_1="发棒棒糖";
          vm.model_1_5_item_2="圣诞节各岗位向小朋友发棒棒糖，让小朋友度过一个愉快的圣诞节";
          vm.model_1_5_item_3="挂迎新灯笼";
          vm.model_1_5_item_4="马上就要过年了，物业管理人员在挂灯笼";
          vm.modelImgUrl1_5_2="";

          vm.modelImgUrl1_6_1="";
          vm.modelImgUrl1_6_2="";
          vm.modelImgUrl1_6_3="";
          vm.model_1_6_item_1="设备房管理";
          vm.model_1_6_item_2="定期维保检查设备房设备，让其小区生活更加和谐时我们的职责所在。";

          vm.modelImgUrl1_7_1="";
          vm.modelImgUrl1_7_2="";
          vm.modelImgUrl1_7_3="";
          vm.model_1_7_item_1="车库漏水整改";
          vm.model_1_7_item_2="节前设备房检查";
          vm.model_1_7_item_3="楼栋消防栓检查";

          vm.model_1_8_item_1="欧鹏K城";
          vm.model_1_8_item_2="新欧鹏物管家 知心管家 让您放心在家";

          vm.executingState="replace";
        }).catch(() => {
          vm.$message.info('已取消执行!');          
        });
      });
    	$(".myAddPage").click(function(){//添加页
    		let cloneLi=$(".myPageUl li").first().clone(true).removeClass("on");
    		let pageNum=$(".myPageUl li").length+1;
    		cloneLi.text("第"+pageNum+"页");
    		$(".myPageUl").append(cloneLi);

        vm.executingState=="add";

    	});
    	$(".myOnDelete").click(function(){//删除页
        if($(".myPageUl li").length>1){
          vm.$confirm('您确定要删除第'+vm.page+'页吗？', '提示', {//删除确认框
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            $(".myPageUl li").remove(".on");
            vm.$message.success('执行成功!');
            if($(".myPageUl li").length>vm.page){//移除完成添加选中页
              $(".myPageUl li").eq(vm.page-1).addClass("on");
            }else{
              $(".myPageUl li").last().addClass("on");
            }
            for(let i=0; i<$(".myPageUl li").length; i++){//移除完成初始显示页数
              $(".myPageUl li").eq(i).text("第"+(i+1)+"页");
            }

            vm.briefingConfig.config.splice(vm.page-1,1);//移除数据
            // console.log(vm.briefingConfig,JSON.stringify(vm.briefingConfig));
          }).catch(() => {
            vm.$message.info('已取消执行!');          
          });
        }else{
          vm.$message.error('已经是最后一页了!');
        }
    	});
      $(".myOnClone").click(function(){//复制(在被选元素后添加)
        if(!vm.briefingConfig.config[vm.page-1]){
          vm.$message.info("没有可以复制的数据！");
          return;
        }
        let cloneLi=$(".myPageUl li.on").clone(true).removeClass("on");
        $(".myPageUl li.on").after(cloneLi);
        for(let i=0; i<$(".myPageUl li").length; i++){//复制完成初始显示页数
          $(".myPageUl li").eq(i).text("第"+(i+1)+"页");
        }
        vm.briefingConfig.config.splice(cloneLi.index(),0,vm.briefingConfig.config[cloneLi.index()-1])
        vm.$message.success('执行成功!');
        // console.log(vm.briefingConfig,JSON.stringify(vm.briefingConfig));
      })
    },  
    methods:{     
      onEdit(){//编辑
        let vm=this;
        if(!vm.iframeData){
          vm.$message.info("请先浏览最终效果！");
          return;
        }
        if(!vm.briefingTitle){
          vm.$message.info("请先为您的简报添加一个标题！");
          return;
        }
        let params={
          title: vm.briefingTitle,
          status: vm.briefingStatus,
          h5_type: 1,
          area_id: 1,
          attr:JSON.stringify(vm.briefingConfig),
          html:vm.iframeData
        }
        editBriefing(vm.id,params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.onBack();
          // console.log("yes",res)
        }).catch(error => {
          vm.$message.error("执行失败！");
          // console.log("no",error)
        })
      },
      onGetBriefingDetail(){//拉取简报详细
        let vm=this;
        getBriefingDetail(vm.id).then(response => {
          let res=JSON.parse(response.data.attr);
          vm.briefingTitle=response.data.title;
          vm.briefingStatus=response.data.status;
          vm.briefingConfig=res;

          for(let i=0; i<res.config.length-1; i++){
            let cloneLi=$(".myPageUl li").first().clone(true).removeClass("on");
            let pageNum=$(".myPageUl li").length+1;
            cloneLi.text("第"+pageNum+"页");
            $(".myPageUl").append(cloneLi);
          }

          if(vm.briefingConfig.config.length>vm.page-1){
            vm.model_1_1_time=vm.briefingConfig.config[0].item[0].value;
            vm.model_1_1_type=vm.briefingConfig.config[0].item[1].value;
            vm.model_1_1_address=vm.briefingConfig.config[0].item[2].value;
            vm.model_1_1_date=vm.briefingConfig.config[0].item[3].value;
          }

          // console.log(response.data)
        }).catch(error => {
          // console.log("no",error)
        })
      },
      onCreate(){//添加
        let vm=this;
        if(!vm.iframeData){
          vm.$message.info("请先浏览最终效果！");
          return;
        }
        if(!vm.briefingTitle){
          vm.$message.info("请先为您的简报添加一个标题！");
          return;
        }
        let params={
          title: vm.briefingTitle,
          status: vm.briefingStatus,
          h5_type: 1,
          area_id: 1,
          attr:JSON.stringify(vm.briefingConfig),
          html:vm.iframeData
        }
        // console.log(params)
        addBriefing(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.onBack();
          // console.log("ok",res)
        }).catch(error => {
          vm.$message.error("执行失败！");
          // console.log("no",error)
        })
      },
      onSave(){
        this.onChangeData();
      },
      onChangeData(){//处理数据
        let vm=this;
        let data=null;
        vm.briefingConfig.title=vm.briefingTitle;
        vm.briefingConfig.status=vm.briefingStatus;
        // console.log("++++++++++++++++",vm.briefingConfig);
        switch(vm.mode){
          case "1-1":
            data={
              "model":vm.mode,
              "item":[
                {"elment":"1-1-1","value":vm.model_1_1_time},
                {"elment":"1-1-2","value":vm.model_1_1_type},
                {"elment":"1-1-3","value":vm.model_1_1_address},
                {"elment":"1-1-4","value":vm.model_1_1_date}
              ]
            }
          break;
          case "1-2":
            data={
              "model":vm.mode,
              "item":[
                {"elment":"1-2-1","value":vm.model_1_2_item_1},
                {"elment":"1-2-2","value":vm.model_1_2_item_2},
                {"elment":"1-2-3","value":vm.model_1_2_item_3},
                {"elment":"1-2-4","value":vm.model_1_2_item_4},
                {"elment":"1-2-5","value":vm.model_1_2_item_5}
              ]
            }
          break;
          case "1-3":
            data={
              "model":vm.mode,
              "item":[
                {"elment":"1-3-1","value":vm.modelImgUrl1_3_1},
                {"elment":"1-3-2","value":vm.model_1_3_item_1},
                {"elment":"1-3-3","value":vm.model_1_3_item_2},
                {"elment":"1-3-4","value":vm.model_1_3_item_3},
                {"elment":"1-3-5","value":vm.model_1_3_item_4},
                {"elment":"1-3-6","value":vm.model_1_3_item_5}
              ]
            }
          break;
          case "1-4":
            data={
              "model":vm.mode,
              "item":[
                {"elment":"1-4-1","value":vm.modelImgUrl1_4_1},
                {"elment":"1-4-2","value":vm.model_1_4_item_1},
                {"elment":"1-4-3","value":vm.model_1_4_item_2},
                {"elment":"1-4-4","value":vm.model_1_4_item_3},
                {"elment":"1-4-5","value":vm.modelImgUrl1_4_2},
                {"elment":"1-4-6","value":vm.modelImgUrl1_4_3}
              ]
            }
          break;
          case "1-5":
            data={
              "model":vm.mode,
              "item":[
                {"elment":"1-5-1","value":vm.modelImgUrl1_5_1},
                {"elment":"1-5-2","value":vm.model_1_5_item_1},
                {"elment":"1-5-3","value":vm.model_1_5_item_2},
                {"elment":"1-5-4","value":vm.model_1_5_item_3},
                {"elment":"1-5-5","value":vm.model_1_5_item_4},
                {"elment":"1-5-6","value":vm.modelImgUrl1_5_2}
              ]
            }
          break;
          case "1-6":
            data={
              "model":vm.mode,
              "item":[
                {"elment":"1-6-1","value":vm.modelImgUrl1_6_1},
                {"elment":"1-6-2","value":vm.modelImgUrl1_6_2},
                {"elment":"1-6-3","value":vm.modelImgUrl1_6_3},
                {"elment":"1-6-4","value":vm.model_1_6_item_1},
                {"elment":"1-6-5","value":vm.model_1_6_item_2},
              ]
            }
          break;
          case "1-7":
            data={
              "model":vm.mode,
              "item":[
                {"elment":"1-7-1","value":vm.modelImgUrl1_7_1},
                {"elment":"1-7-2","value":vm.modelImgUrl1_7_2},
                {"elment":"1-7-3","value":vm.modelImgUrl1_7_3},
                {"elment":"1-7-4","value":vm.model_1_7_item_1},
                {"elment":"1-7-5","value":vm.model_1_7_item_2},
                {"elment":"1-7-5","value":vm.model_1_7_item_3},
              ]
            }
          break;
          case "1-8":
            data={
              "model":vm.mode,
              "item":[
                {"elment":"1-8-1","value":vm.model_1_8_item_1},
                {"elment":"1-8-2","value":vm.model_1_8_item_2},
              ]
            }
          break;
        }
        // console.log(vm.executingState,vm.page-1>=vm.briefingConfig.config.length);

        if(vm.executingState=="add" && vm.page-1>=vm.briefingConfig.config.length){
          vm.briefingConfig.config.push(data);
        }else{//(vm.executingState=="replace")
          vm.briefingConfig.config.splice(vm.page-1,1,data);//替换当前页下标所在的数据
        }
        vm.$message.success("保存成功");
        // console.log(this.briefingConfig,JSON.stringify(this.briefingConfig));
      },
      onGetConfigData(){//预览时读取配置数据
        let vm=this;
        vm.htmlData="";
        for(let i=0; i<vm.briefingConfig.config.length; i++){
          switch(vm.briefingConfig.config[i].model){
            case "1-1":
              vm.htmlData+=`
                <div class="swiper-slide">
                  <div class="ani resize" style="width:105px;left:112px;top:80px;z-index:2;color: #fff; font-size: 400%; font-weight: 600" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
                      <div class="txt">${vm.briefingConfig.config[i].item[0].value}</div>
                  </div>
                  <div class="ani resize" style="width:80px;left:120px;top:130px;z-index:2;color: #fff; font-size: 400%; font-weight: 600; line-height: 1.1; " swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
                      <div class="txt">${vm.briefingConfig.config[i].item[1].value}</div>
                  </div>
                  <img src=${STATIC_B_URL}model1-1-3.png class="ani resize" style="width:290px;left:15px;top:10px;z-index:1;" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" >
                  <img src=${STATIC_B_URL}model1-1-4.png class="ani resize" style="width:90px;left:115px;top:290px;z-index:1;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" >
                  <div class="ani resize" style="width:320px;left:0;top:318px;z-index:2;color: #fff; font-size: 200%; font-weight: 600" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" >
                      <div class="txt" style="width: 320px; text-align: center;">${vm.briefingConfig.config[i].item[2].value}</div>
                  </div>
                  <div class="ani resize" style="width:320px;left:0;top:345px;z-index:2;color: #7ecdff; font-size: 125%; font-weight: 600" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" >
                      <div class="txt" style="width: 320px; text-align: center;">${vm.briefingConfig.config[i].item[3].value}</div>
                  </div>
                  <img src=${STATIC_B_URL}model1-1-7.png class="ani resize" style="width:320px;left:0;bottom: 0;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s" >
              </div>
              `
            break;
            case "1-2":
              let modelItem="";
              for(let j=0 ;j<vm.briefingConfig.config[i].item.length; j++){
                modelItem+=`
                  <div class="ani resize" style="width:300px;left:30px;top:${80+(j*30)}px;z-index:2;color: #fff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="${1+(j*0.3)}s">
                      <div class="txt">${vm.briefingConfig.config[i].item[j].value}</div>
                  </div>
                `
              }
              vm.htmlData+=`
                <div class="swiper-slide">
                  <img src=${STATIC_B_URL}model1-2-1.png class="ani resize" style="width:60px;left:130px;top:10px;z-index:1;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
                  <img src=${STATIC_B_URL}model1-2-2.png class="ani resize" style="width:280px;height:400px;left:20px;top:50px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" >
                  ${modelItem}
                </div>
              `
            break;
            case "1-3":
              vm.htmlData+=`
                <div class="swiper-slide">
                  <img src="${vm.briefingConfig.config[i].item[0].value}" class="ani resize" style="width:300px;height:200px;left:10px;top:10px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
                  <img src=${STATIC_B_URL}model1-3-1.png class="ani resize" style="width:300px;left:10px;top:230px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" >
                  <div class="ani resize" style="width:300px;left:30px;top:240px;z-index:2;color: #49b8ff; font-size: 200%; font-weight: 600;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
                      <div class="txt">${vm.briefingConfig.config[i].item[1].value}</div>
                  </div>
                  <div class="ani resize" style="width:300px;left:30px;top:290px;z-index:2;color: #fff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="1.5s">
                      <div class="txt">${vm.briefingConfig.config[i].item[2].value}</div>
                  </div>
                  <div class="ani resize" style="width:300px;left:30px;top:320px;z-index:2;color: #fff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="1.8s">
                      <div class="txt">${vm.briefingConfig.config[i].item[3].value}</div>
                  </div>
                  <div class="ani resize" style="width:300px;left:30px;top:350px;z-index:2;color: #fff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="2.1s">
                      <div class="txt">${vm.briefingConfig.config[i].item[4].value}</div>
                  </div>
                  <div class="ani resize" style="width:300px;left:30px;top:380px;z-index:2;color: #fff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="2.4s">
                      <div class="txt">${vm.briefingConfig.config[i].item[5].value}</div>
                  </div>
              </div>
              `
            break;
            case "1-4":
            vm.htmlData+=`
              <div class="swiper-slide">
                <img src="${vm.briefingConfig.config[i].item[0].value}" class="ani resize" style="width:300px;height:200px;left:10px;top:10px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
                <div class="ani resize" style="width:320px;left:0px;top:230px;text-align: center; z-index:2;color: #d4eeff; font-size: 200%; font-weight: 600;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
                    <div class="txt" style="width: 320px; text-align: center;">${vm.briefingConfig.config[i].item[1].value}</div>
                </div>
                <div class="ani resize" style="width:320px;left:0px;top:260px;text-align: center; z-index:2;color: #d4eeff; font-size: 200%; font-weight: 600;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1s">
                    <div class="txt" style="width: 320px; text-align: center;">${vm.briefingConfig.config[i].item[2].value}</div>
                </div>
                <img src=${STATIC_B_URL}model1-4-1.png class="ani resize" style="width:300px;left:10px;top:300px;z-index:1;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" >
                <div class="ani resize" style="width:320px;left:0px;top:315px;text-align: center; z-index:2;color: #d4eeff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
                    <div class="txt" style="width: 320px; text-align: center;">${vm.briefingConfig.config[i].item[3].value}</div>
                </div>
                <img src="${vm.briefingConfig.config[i].item[4].value}" class="ani resize" style="width:145px;height:100px;left:10px;top:350px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" >
                <img src="${vm.briefingConfig.config[i].item[5].value}" class="ani resize" style="width:145px;height:100px;left:165px;top:350px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" >
              </div>
            `
            break;
            case "1-5":
            vm.htmlData+=`
              <div class="swiper-slide">
                <img src="${vm.briefingConfig.config[i].item[0].value}" class="ani resize" style="width:145px;height:200px;left:10px;top:10px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
                <div class="ani resize" style="width:145px;left:165px;top:10px;z-index:1;color: #49b8ff; font-size: 200%; font-weight: 600;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="0.5s">
                    <div class="txt">${vm.briefingConfig.config[i].item[1].value}</div>
                </div>
                <div class="ani resize" style="width:145px;left:165px;top:40px; text-align: justify; z-index:1;color: #d4eeff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="0.8s">
                    <div class="txt" style="width: 145px;">${vm.briefingConfig.config[i].item[2].value}</div>
                </div>
                <div class="ani resize" style="width:145px;left:10px;top:240px;z-index:1;text-align: right; color: #49b8ff; font-size: 200%; font-weight: 600;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="1.8s">
                    <div class="txt" style="width: 145px;">${vm.briefingConfig.config[i].item[3].value}</div>
                </div>
                <div class="ani resize" style="width:145px;left:10px;top:270px; text-align: justify; z-index:1;color: #d4eeff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="2.3s">
                    <div class="txt" style="width: 145px;">${vm.briefingConfig.config[i].item[4].value}</div>
                </div>
                <img src="${vm.briefingConfig.config[i].item[5].value}" class="ani resize" style="width:145px;height:200px;left:165px;top:240px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s" >
              </div>
            `
            break;
            case "1-6":
            vm.htmlData+=`
              <div class="swiper-slide">
                <img src="${vm.briefingConfig.config[i].item[0].value}" class="ani resize" style="width:145px;height:240px;left:10px;top:10px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
                <img src="${vm.briefingConfig.config[i].item[1].value}" class="ani resize" style="width:145px;height:115px;left:165px;top:10px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" >
                <img src="${vm.briefingConfig.config[i].item[2].value}" class="ani resize" style="width:145px;height:115px;left:165px;top:135px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" >
                <img src=${STATIC_B_URL}model1-6-1.png class="ani resize" style="width:300px;height:200px;left:10px;top:270px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s" >
                <div class="ani resize" style="width:280px;left:20px;top:280px;text-align: center; z-index:2;color: #49b8ff; font-size: 200%; font-weight: 600;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
                    <div class="txt" style="width: 280px; text-align: center;">${vm.briefingConfig.config[i].item[3].value}</div>
                </div>
                <div class="ani resize" style="width:280px;left:20px;top:310px;z-index:2;text-align: justify;color: #d4eeff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
                    <div class="txt" style="width: 280px;">${vm.briefingConfig.config[i].item[4].value}</div>
                </div>
              </div>
            `
            break;
            case "1-7":
            vm.htmlData+=`
              <div class="swiper-slide">
                <img src="${vm.briefingConfig.config[i].item[0].value}" class="ani resize" style="width:300px;height:150px;left:10px;top:10px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
                <img src="${vm.briefingConfig.config[i].item[1].value}" class="ani resize" style="width:300px;height:150px;left:10px;top:165px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
                <img src="${vm.briefingConfig.config[i].item[2].value}" class="ani resize" style="width:300px;height:150px;left:10px;top:320px;z-index:1; border:2px solid #69b9ff; box-sizing: border-box;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" >
                <div class="ani resize" style="width:300px;left:11px;top:138px; z-index:2;color: #49b8ff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                    <div class="txt" style="background: #fff;">${vm.briefingConfig.config[i].item[3].value}</div>
                </div>
                <div class="ani resize" style="width:300px;left:11px;top:294px; z-index:2;color: #49b8ff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                    <div class="txt" style="background: #fff;">${vm.briefingConfig.config[i].item[4].value}</div>
                </div>
                <div class="ani resize" style="width:300px;left:11px;top:449px; z-index:2;color: #49b8ff; font-size: 150%; font-weight: 600;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
                    <div class="txt" style="background: #fff;">${vm.briefingConfig.config[i].item[5].value}</div>
                </div>
              </div>
            `
            break;
            case "1-8":
            vm.htmlData+=`
              <div class="swiper-slide">
                <img src=${STATIC_B_URL}model1-8-1.png class="ani resize" style="width:200px;left:60px;top:50px;z-index:1; " swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" >
                <div class="ani resize" style="width:280px;left:20px;top:120px;text-align: center; z-index:2;color: #d4eeff; font-size: 400%; font-weight: 600;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
                    <div class="txt" style="width:280px; text-align: center;">${vm.briefingConfig.config[i].item[0].value}</div>
                </div>
                <img src=${STATIC_B_URL}model1-1-7.png class="ani resize" style="width:320px;left:0;bottom: 0;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1s" >
                <div class="ani resize" style="width:300px;left:10px;bottom:100px;text-align: center; z-index:2;color: #d4eeff; font-size: 100%; font-weight: 600;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
                    <div class="txt" style="width: 300px; text-align: center;">${vm.briefingConfig.config[i].item[1].value}</div>
                </div>
              </div>
            `
            break;
          }
        }
      },
      onBack(){//返回
        let vm=this;
        window.localStorage.setItem('pageNum',vm.$route.query.pageNum||1);
        vm.$router.go(-1);
      },
      onGetQNToken(){ //上传图片之前拉取的token 
        let vm=this;
        getQNToken().then(response => {
          let res=response.data.up_token;
          vm.postData.token=res;
        }).catch(error => {
          // console.log("失败")
        })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
      handleAvatarSuccess(res, file) {
        this.modelImgUrl1_3_1 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_4_1(res, file) {
        this.modelImgUrl1_4_1 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_4_2(res, file) {
        this.modelImgUrl1_4_2 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_4_3(res, file) {
        this.modelImgUrl1_4_3 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_5_1(res, file) {
        this.modelImgUrl1_5_1 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_5_2(res, file) {
        this.modelImgUrl1_5_2 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_6_1(res, file) {
        this.modelImgUrl1_6_1 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_6_2(res, file) {
        this.modelImgUrl1_6_2 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_6_3(res, file) {
        this.modelImgUrl1_6_3 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_7_1(res, file) {
        this.modelImgUrl1_7_1 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_7_2(res, file) {
        this.modelImgUrl1_7_2 = QINIU_API + res.key;
      },
      handleAvatarSuccess1_7_3(res, file) {
        this.modelImgUrl1_7_3 = QINIU_API + res.key;
      },
      onPreview(){//预览
        let vm=this;
        if(vm.briefingConfig.config.length<=0){
          vm.$message.info("没有可预览的数据！");
          return;
        }
        vm.onPreviewDialog=true;
      },
      onOpen(){
        let vm=this;
        vm.onGetConfigData();
        vm.iframeData=`
          <!DOCTYPE html>
          <html>
              <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0">
                  <meta name="apple-mobile-web-app-capable" content="yes">
                  <meta name="format-detection" content="telephone=no">
                  <meta name="apple-mobile-web-app-status-bar-style" content="black">
                  <title>预览</title>
                  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/css/swiper.min.css">
                  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
                  <style>
                      *{margin:0;padding:0;border:0;vertical-align:baseline;}
                      ol,ul{list-style:none;}
                      a{text-decoration:none;}
                      img{vertical-align:middle;border:0;}
                      body{font-family:"Microsoft YaHei",SimHei,arial;font-size:62.5%;}
                      html, body {  position: relative; height: 100%;}
                      .swiper-container {width: 100%;height: 100%;    margin: 0 auto;  position: relative;  overflow: hidden;  z-index: 1;}
                      .swiper-container-vertical>.swiper-wrapper {  -webkit-box-orient: vertical;  -moz-box-orient: vertical;  -ms-flex-direction: column;  -webkit-flex-direction: column;  flex-direction: column;  }
                      .swiper-wrapper {  position: relative;  width: 100%;  height: 100%;  z-index: 1;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-transition-property: -webkit-transform;  -moz-transition-property: -moz-transform;  -o-transition-property: -o-transform;  -ms-transition-property: -ms-transform; transition-property: transform;  -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;  }
                      .swiper-slide {background:#F5F7F2 url(${STATIC_B_URL}bg.png) no-repeat left top; flex-shrink: 0; width: 100%; height: 100%; position: relative; background-size:100% 100%; }
                      .swiper-pagination-bullet {background: #fff;opacity: .4;}
                      .swiper-pagination-bullet-active {opacity: 1;}
                      .ani{position:absolute;}
                      .txt{ position:absolute;}
                  </style>
              </head>
              <body>
                  <div class="swiper-container">
                      <div class="swiper-wrapper">
                          ${vm.htmlData}
                      </div>
                      <div class="swiper-pagination"></div>
                  </div>
                  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js">`+`<`+`/script>
                  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/js/swiper.min.js">`+`<`+`/script>
                  <script>
                      function swiperAnimateCache(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["style"]?allBoxes[i].setAttribute("swiper-animate-style-cache",allBoxes[i].attributes["style"].value):allBoxes[i].setAttribute("swiper-animate-style-cache"," "),allBoxes[i].style.visibility="hidden"}function swiperAnimate(a){clearSwiperAnimate();var b=a.slides[a.activeIndex].querySelectorAll(".ani");for(i=0;i<b.length;i++)b[i].style.visibility="visible",effect=b[i].attributes["swiper-animate-effect"]?b[i].attributes["swiper-animate-effect"].value:"",b[i].className=b[i].className+"  "+effect+" "+"animated",style=b[i].attributes["style"].value,duration=b[i].attributes["swiper-animate-duration"]?b[i].attributes["swiper-animate-duration"].value:"",duration&&(style=style+"animation-duration:"+duration+";-webkit-animation-duration:"+duration+";"),delay=b[i].attributes["swiper-animate-delay"]?b[i].attributes["swiper-animate-delay"].value:"",delay&&(style=style+"animation-delay:"+delay+";-webkit-animation-delay:"+delay+";"),b[i].setAttribute("style",style)}function clearSwiperAnimate(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["swiper-animate-style-cache"]&&allBoxes[i].setAttribute("style",allBoxes[i].attributes["swiper-animate-style-cache"].value),allBoxes[i].style.visibility="hidden",allBoxes[i].className=allBoxes[i].className.replace("animated"," "),allBoxes[i].attributes["swiper-animate-effect"]&&(effect=allBoxes[i].attributes["swiper-animate-effect"].value,allBoxes[i].className=allBoxes[i].className.replace(effect," "))};
                      var scaleW=window.innerWidth/320;
                      var scaleH=window.innerHeight/480;
                      var resizes = document.querySelectorAll('.resize');
                      for (var j=0; j<resizes.length; j++) {
                          resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
                          resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
                          resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
                          resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
                      }
                      var scales = document.querySelectorAll('.txt');
                      for (var i=0; i<scales.length; i++) {
                          ss=scales[i].style;
                          ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
                      }
                      var mySwiper = new Swiper('.swiper-container',{
                          direction : 'vertical',
                          pagination: '.swiper-pagination',
                          mousewheelControl : true,
                          onInit: function(swiper){
                             swiperAnimateCache(swiper);
                             swiperAnimate(swiper);
                           },
                           onSlideChangeEnd: function(swiper){
                             swiperAnimate(swiper);
                           }
                      });
                  `+`<`+`/script>
              </body>
          </html>
        `;
        window.setTimeout(function(){
          let myIframe=document.getElementById("myIframe");
          myIframe.contentWindow.document.head.innerHTML='';
          myIframe.contentWindow.document.body.innerHTML='';
          myIframe.contentWindow.document.write(vm.iframeData);
        },100);        
      },
      
    }
  
  }


</script>




